<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>学科品类</title>
    <th:block th:replace="/backstage/common_resources::common_css"/>
    <th:block th:replace="/backstage/common_resources::common_js"/>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
    <header th:replace="~{/backstage/common_header::header}"></header>
    <aside th:replace="~{/backstage/common_aside::aside}"></aside>
    <!-- 内容区域 -->
    <div class="content-wrapper">
        <!-- 内容头部 -->
        <section class="content-header">
            <h1>二手书籍学科品类<small>全部品类</small></h1>
        </section>
        <!-- 内容头部 /-->

        <!-- 正文区域 -->
        <section class="content"> <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">列表</h3>
                </div>
                <div class="box-body">
                    <!-- 数据表格 -->
                    <div class="table-box">
                        <!--工具栏-->
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <div class="btn-group">
                                    <a th:href="@{/backstage/bookcategory_add}">
                                        <button type="button" class="btn btn-default" title="新建"><i class="fa fa-file-o"></i> 新增学科</button>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!--数据列表-->
                        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                            <thead><tr><th></th><th>学科名称</th><th class="text-center">操作</th></tr></thead>

                            <tbody>
                            <tr th:each="bookCategory:${bookcategoryPage.records}">
                                <td><input name="ids" type="checkbox" value="${bookCategory.bookcategoryid}"></td>
                                <td th:text="${bookCategory.bookcategoryname }"></td>
                                <td class="text-center">
                                    <a th:href="@{/backstage/bookcategory/edit(bookcategoryid=${bookCategory.bookcategoryid})}" class="btn bg-olive btn-xs">修改名称</a>
                                    <a th:href="@{/backstage/admin/findRole(bookcategoryid=${bookCategory.bookcategoryid})}" class="btn bg-blue btn-xs">添加书籍</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--数据列表/-->
                    </div>
                    <!-- 数据表格 /-->
                </div>
                <!-- .box-footer-->
                <div class="box-footer">
                    <div class="pull-left">
                        <div class="form-group form-inline">
                            总共<span th:text="${bookcategoryPage.pages}"></span>页，共<span th:text="${bookcategoryPage.total}"></span>条数据。
                        </div>
                    </div>
                    <div class="box-tools pull-right">
                        <ul class="pagination"></ul>
                    </div>
                </div>
                <!-- /.box-footer-->
            </div>
        </section>
        <!-- 正文区域 /-->
    </div>
    <!-- 底部导航 -->
    <footer th:replace="~{/backstage/common_footer::footer}"></footer>
</div>


<!-- 在js中获取Model的值 -->
<script th:inline="javascript">
    $(function () {
        var currentPage = [[${bookcategoryPage.current}]]; // 当前页
        var pages = [[${bookcategoryPage.pages}]]; // 总页数


        // 分页插件
        $('.pagination').bootstrapPaginator({
            bootstrapMajorVersion: 3, // bootstrap版本
            currentPage: currentPage, // 当前页
            totalPages: pages, // 总页数
            numberOfPages: 5, // 最多显示多少页
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            onPageClicked: function (event, originalEvent, type, page) { // 点击页码执行的方法
                location.href = "/backstage/bookcategory/all?page=" + page;
            }
        });
    })
</script>
</body>
</html>
